<template>
    <div ref="echartPie" style="width: 100%; height:400px"></div>
</template>
<script lang="ts" setup>
import { ref, onMounted,defineProps,watch,toRef } from "vue"
import * as echarts from 'echarts';
import {getClassCount} from "@/api/table"

type EChartsOption = echarts.EChartsOption;

const props = defineProps({
    cid:{
        type:Number,
        default:0
    }
})

const cids = toRef(props,'cid')
// echarts.use([
//     TitleComponent,
//     TooltipComponent,
//     LegendComponent,
//     PieChart,
//     CanvasRenderer,
//     LabelLayout
// ]);


const echartPie = ref(null)
// type EChartsOption = echarts.ComposeOption<
//     | TitleComponentOption
//     | TooltipComponentOption
//     | LegendComponentOption
//     | PieSeriesOption
// >;
let  myChart=null
onMounted(() => {
    init()
})

const init =async ()=>{
    let res = null
    let datas = []
    if (props.cid) {
        res = await getClassCount(props.cid).catch(() => { })
    } else {
        res = await getClassCount().catch(() => { })
    }
    let sum =0
    if (res) {
        for(var i=0;i<res.data.length;i++){
            datas.push({name:res.data[i].nickname,value:res.data[i].zs})
            sum+=res.data[i].zs
        }
    }
    var chartDom =echartPie.value;
    myChart = echarts.init(chartDom);
    var option: EChartsOption;
    option = {
        title: {
            text: '面试量统计',
            subtext: '当前面试总数（'+sum+'）',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '当前面试量',
                type: 'pie',
                radius: '50%',
                data: datas,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label:{
                    show:true,
                    formatter: '{b}({d}%)'
                }
            }
        ]
    };

    option && myChart.setOption(option);


}

let resizeHandler = ()=>{
    myChart.resize();
}


window.addEventListener('resize', resizeHandler)


watch(cids,(n,o) => {
    console.log(n,o,123)
    init()
},{
    immediate:true
})

</script>